<?php
	include 'config.php';
	$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME) or die("Could not execute query");
	$query = "SELECT * FROM lexsettings INNER JOIN context ON lexsettings.lexid = context.lexid";
	$result = mysqli_query($con, $query) or die("Could not SELECT * FROM lexsettings INNER JOIN context ON lexsettings.lexid = context.lexid");
	while ($rows = mysqli_fetch_assoc($result)) {
		$results[] = $rows;
		// print_r($results);
	}
	foreach ($results as $row) {
	$lextitle = $row['lextitle'];
	$lexcontext = $row['context'];
	$posts[] = "g.addEdge(".json_encode($lextitle).",".json_encode($lexcontext).")";
	$str = implode(";",$posts);
	$lexes[] = "g.addNode(".json_encode($lextitle).")";
$str2 = implode(";",$lexes);
	}
	
	$query1 = "SELECT * FROM lexsettings INNER JOIN skill ON lexsettings.lexid = skill.lexid";
	$result1 = mysqli_query($con, $query1) or die("Could not SELECT * FROM skill INNER JOIN skill ON lexsettings.lexid = skill.lexid");
	while ($rows1 = mysqli_fetch_assoc($result1)) {
		$results1[] = $rows1;
		// print_r($results);
	}
	foreach ($results1 as $row1) {
	$lextitle1 = $row1['lextitle'];
	$lexskill1 = $row1['skill'];
	$posts1[] = "g.addEdge(".json_encode($lextitle1).",".json_encode($lexskill1).")";
	$str1 = implode(";",$posts1);
	$lexes1[] = "g.addNode(".json_encode($lextitle1).")";
$str3 = implode(";",$lexes1);
	}
	

$start = "var redraw, g, renderer;

/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {

	var width = 800;
	var height = 400;

	g = new Graph();";

$end = 'st = {
		directed : true,
		label : "Label",
		"label-style" : {
			"font-size" : 24
		}
	};

	/* connect nodes with edges */

	var strokew = "stroke-width";

	var layouter = new Graph.Layout.Spring(g);

	renderer = new Graph.Renderer.Raphael("canvas", g, width, height);

	redraw = function() {
		layouter.layout();
		renderer.draw();
	};
	hide = function(id) {
		g.nodes[id].hide();
	};
	show = function(id) {
		g.nodes[id].show();
		renderer.draw();
	};

var work = document.getElementById("Working life");
	if (work) {
		work.style.fill = "blue";
		work.setAttribute("rx", "10");
		work.setAttribute("ry", "10");
	};
 
	var home = document.getElementById("Personal life");
	if (home) {
		home.style.fill = "red";
		home.setAttribute("rx", "10");
		home.setAttribute("ry", "10");
	}

	var academic = document.getElementById("Academic life");
	if (academic) {
		academic.style.fill = "green";
		academic.setAttribute("rx", "5");
		academic.setAttribute("ry", "5");
	};
		var text = document.getElementsByTagName("tspan");
		for (i=0; i<text.length; i++){
		if(text[i].innerHTML=="Critical-thinking and problem-solving"){
		text[i].style.fill = "red";
		text[i].setAttribute("width", "10px");
		text[i].setAttribute("id", text[i].innerHTML);
}
};
	
		var path = document.getElementsByTagName("path");
		for (i=0; i<path.length; i++){
		path[i].setAttribute("id", path[i].innerHTML);
		};
		var ellipse = document.getElementsByTagName("ellipse");
		for (i=0; i<ellipse.length; i++){
	var skill = ellipse[i].id;	
	switch (skill) {
    case "Critical-thinking and problem-solving":
      	ellipse[i].style.fill = "red";
		ellipse[i].setAttribute("rx", "20");
		ellipse[i].setAttribute("ry", "20");
        break;
    case "Creativity and innovation":
      	ellipse[i].style.fill = "orange";
        break;
    case "Collaboration, teamwork and leadership":
       	ellipse[i].style.fill = "yellow";
        break;
    case "Cross-cultural understanding":
        ellipse[i].style.fill = "green";
        break;
    case "Communication and media fluency":
       	ellipse[i].style.fill = "blue";
        break;
    case "Computing and ICT fluency":
        ellipse[i].style.fill = "indigo";
        break;
    case "Career and learning self-reliance":
       	ellipse[i].style.fill = "violet";
        break;
} 	
	}	
};';

$fp = fopen('js/contextmap.js','w');
	fwrite($fp,$start);
	fwrite($fp,$str2.";");
	fwrite($fp,$str.";");
	fwrite($fp,$str3.";");
	fwrite($fp,$str1.";");
	fwrite($fp,$end);
	fclose($fp);
?>
<html>
<head>
    <script type="text/javascript" src="js/raphael-min.js"></script>
   <script type="text/javascript" src="js/dracula_graffle.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="js/dracula_graph.js"></script>
    <script type="text/javascript" src="js/contextmap.js"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="canvas"></div>
<button id="redraw" onclick="redraw();">redraw</button>
<button id="hide_personal_life" onclick="hide('Personal life');">hide personal life</button>

<button id="show_personal_life" onclick="show('Personal life');">show personal life</button>

</body>
</html>